<template>
  <div class="top">
    <img
      style="width: 100%"
      src="../imgs/首页.png"
      alt=""
    />
    <!-- 轮播图 -->
    <!-- <swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <swipe-item>
        <img src="https://s1.328888.xyz/2022/10/04/Po9m7.png" alt="" />
      </swipe-item>
      <swipe-item></swipe-item>
    </swipe> -->
    <div class="sky">
      <!-- 地区 -->
      <!-- <div
        class="area"
        style="
          width: 50%;
          height: 20%;
          margin: 1%;
          padding: 3%;
          /* background-color: azure; */
        "
      >
        北京
      </div> -->
      <Field class="area"
        style="width: 50%;height: 20%;margin: 1%;"
        v-model="result"
        placeholder="北京"
        readonly
        @click="showPicker = true"
      />
      <popup v-model:show="showPicker" round position="bottom">
  <picker
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm1"
  />
</popup>
      <hr />
      <!-- 选择日期 -->
      <div id="date">
        <div style="width: 60%; height: 20%">
          <Cell
            class="date"
            style="margin: 1%"
            :value="date ? date : '10月20日--10月21日'"
            @click="show = true"
          />

          <Calendar v-model:show="show" type="range" @confirm="onConfirm" />
        </div>
        <div style="width: 30%">
          <cell  @click="showPopupNumber">人数/床数</cell>
          <popup
            v-model:show="showNumber"
            round
            closeable
            position="bottom"
            :style="{ height: '30%' }"
          />
        </div>
      </div>
      <hr />
      <!-- 搜索民宿 -->
      <Form class="search" @submit="onSubmit">
        <cell-group inset>
          <field
            :to="{ name: 'Search' }"
            v-model="text"
            placeholder="搜索民宿/位置/关键词"
          >
          </field>
        </cell-group>
        <!-- <div style="margin: 16px"> -->
        <Button
          round
          block
          type="primary"
          :to="{ name: 'Search' }"
          native-type="submit"
          color="linear-gradient(to right, #fb6582, #fd879d)"
          style="width: 90%; margin: 2%"
        >
          搜索民宿
        </Button>
        <!-- </div> -->
      </Form>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import {
  Toast,
  Icon,
  Calendar,
  Cell,
  CellGroup,
  Cascader,
  Field,
  Popup,
  Button,
  Form,
  Picker,
  IndexBar,
  IndexAnchor,
  DropdownMenu,
  DropdownItem,
} from "vant";

/* 搜索 */
const text = ref("");
const onSubmit = (values) => {
  console.log("submit", values);
};

/* 地区 */
const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];
    const result = ref('');
    const showPicker = ref(false);

    const onConfirm1 = (value) => {
      result.value = value;
      showPicker.value = false;
    };
const showPopup = ref(false);
const fieldValue = ref("");
const cascaderValue = ref("");
// 选项列表，children 代表子选项，支持多级嵌套
const options = [
  {
    text: "浙江省",
    value: "330000",
    children: [{ text: "杭州市", value: "330100" }],
  },
  {
    text: "江苏省",
    value: "320000",
    children: [{ text: "南京市", value: "320100" }],
  },
];
// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => {
  showPopup.value = false;
  fieldValue.value = selectedOptions.map((option) => option.text).join("/");
};

/* 日期 */
const date = ref("");
const show = ref(false);

const formatDate = (date) => `${date.getMonth() + 1}月/${date.getDate()}日`;
const onConfirm = (values) => {
  const [start, end] = values;
  show.value = false;
  date.value = `${formatDate(start)} -- ${formatDate(end)}`;
};
const showNumber = ref(false);
const showPopupNumber = () => {
  showNumber.value = true;
};
</script>
<style scoped>
.top {
  height: 40vh;
  position: relative;
}
/* 轮播图 */
.my-swipe .swipe-item {
  width: 100vw;
  height: 30vh;
  background-color: rgb(91, 131, 188);
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
.sky {
  box-sizing: border-box;
  padding: 2%;
  position: absolute;
  top: 44%;
  left: 5%;
  width: 90vw;
  height: 28vh;
  border-radius: 5%;
  background-color: #fff;
}
#date {
  display: flex;
  justify-content: space-between;
}
/* search */
.search {
  width: 100%;
  height: 40%;
  position: absolute;
  bottom: 8%;
}
</style>
